const buttons = document.querySelectorAll("button");
// 循环设置每个按钮
buttons.forEach((button) => {
    // 添加点击事件
    button.addEventListener("click", (e) => {
        /*
        x = 鼠标位置距离浏览器左边缘的坐标 - 元素距离浏览器左边缘的坐标
        y同上
        */
        let x = e.clientX - e.target.offsetLeft;
        let y = e.clientY - e.target.offsetTop;

        // 创建水波纹元素
        let ripples = document.createElement("span");
        ripples.style.left = x + "px";
        ripples.style.top = y + "px";

        button.appendChild(ripples);

        setTimeout(() => {
            ripples.remove();
        }, 1000);
    });
})